<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子健康档案 - 智联医防服务平台</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --secondary: #36D399;
            --accent: #FF9F43;
            --dark: #1E293B;
            --light: #F8FAFC;
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 80px;
        }

        .bg-gradient-blue {
            background: linear-gradient(135deg, var(--primary) 0%, #0F4C81 100%);
        }

        .nav-link {
            position: relative;
            color: var(--dark) !important;
            font-weight: 500;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary) !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 2.5rem;
        }

        .footer {
            background-color: var(--dark);
            color: white;
            padding-top: 4rem;
            padding-bottom: 2rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: white;
        }

        .profile-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            width: 240px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 0.5rem 0;
        }

        .show-dropdown:hover .profile-dropdown {
            display: block;
        }

        .nav-shadow {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .navbar {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        .record-item {
            border-left: 3px solid var(--primary);
            padding-left: 15px;
            margin-bottom: 25px;
        }

        .health-metric {
            height: 100%;
        }

        .record-detail {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .metric-card {
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
        }

        .info-section {
            display: none;
        }

        .info-section.active {
            display: block;
        }

        .record-list {
            max-height: 500px;
            overflow-y: auto;
        }

        .medication-card {
            border-left: 4px solid var(--accent);
        }

        .appointment-card {
            border-left: 4px solid var(--secondary);
        }

        .bg-blue-50 {
            background-color: #e6f7ff;
        }

        .bg-green-50 {
            background-color: #f6ffed;
        }

        .bg-purple-50 {
            background-color: #f9f0ff;
        }

        .bg-red-50 {
            background-color: #fff1f0;
        }

        .bg-yellow-50 {
            background-color: #fffbe6;
        }

        .bg-indigo-50 {
            background-color: #f0f5ff;
        }

        .border-blue-100 {
            border-color: #91d5ff;
        }

        .border-green-100 {
            border-color: #b7eb8f;
        }

        .border-purple-100 {
            border-color: #d3adf7;
        }

        .border-red-100 {
            border-color: #ffa39e;
        }

        .border-yellow-100 {
            border-color: #ffe58f;
        }

        .border-indigo-100 {
            border-color: #adc6ff;
        }

        .text-blue-800 {
            color: #0050b3;
        }

        .text-green-800 {
            color: #237804;
        }

        .text-purple-800 {
            color: #722ed1;
        }

        .text-red-800 {
            color: #a8071a;
        }

        .text-yellow-800 {
            color: #ad8b00;
        }

        .text-indigo-800 {
            color: #10239e;
        }

        .text-blue-900 {
            color: #003a8c;
        }

        .text-green-900 {
            color: #135200;
        }

        .text-purple-900 {
            color: #391085;
        }

        .text-red-900 {
            color: #820014;
        }

        .text-yellow-900 {
            color: #874d00;
        }

        .text-indigo-900 {
            color: #061178;
        }

        .text-blue-600 {
            color: #096dd9;
        }

        .text-green-600 {
            color: #52c41a;
        }

        .text-purple-600 {
            color: #9254de;
        }

        .text-red-600 {
            color: #f5222d;
        }

        .text-yellow-600 {
            color: #faad14;
        }

        .text-indigo-600 {
            color: #2f54eb;
        }

        .nav-pills .nav-link.active {
            background-color: var(--primary) !important;
            color: white !important;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 nav-shadow">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="index.html">
                <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                    style="width: 40px; height: 40px;">
                    <i class="fas fa-heartbeat text-white fs-5"></i>
                </div>
                <span class="fs-4 fw-bold text-primary">智联医防</span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="ai-consultation.html">AI问诊</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="medical-science.html">医学科普</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="mental-health.html">心理健康</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link active" href="e-record.html">电子档案</a>
                    </li>
                </ul>

                <div class="d-flex align-items-center position-relative show-dropdown">
                    <a href="profile.html" class="d-flex align-items-center text-decoration-none">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="rounded-circle me-2"
                            style="width: 40px; height: 40px; border: 2px solid var(--primary);">
                        <span class="d-none d-md-inline fw-medium me-1">张明阳</span>
                        <i class="fas fa-angle-down text-muted"></i>
                    </a>

                    <div class="profile-dropdown">
                        <a href="profile.html" class="dropdown-item py-2">
                            <i class="far fa-user me-2"></i>个人资料
                        </a>
                        <a href="#" class="dropdown-item py-2">
                            <i class="fas fa-cog me-2"></i>设置
                        </a>
                        <hr class="dropdown-divider">
                        <a href="#" class="dropdown-item py-2 text-danger">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 电子档案内容 -->
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="section-title text-dark">
                电子<span class="text-primary">健康档案</span>
            </h2>
            <p class="text-muted fs-5 mx-auto" style="max-width: 700px;">
                安全存储您的健康信息，包括基本信息、既往病史、检查报告等，方便随时查看和医生远程诊疗。
            </p>
        </div>

        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card feature-card">
                    <div class="bg-gradient-blue text-white p-4">
                        <h3 class="h5 fw-semibold mb-1">个人健康档案</h3>
                        <p class="text-white-50 mb-0">管理您的健康信息</p>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-4">
                            <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="rounded-circle me-3"
                                style="width: 64px; height: 64px; border: 2px solid var(--primary);">
                            <div>
                                <h5 class="mb-0">张明阳</h5>
                                <p class="text-muted small mb-0">ID: HC-100001</p>
                            </div>
                        </div>

                        <div class="list-group list-group-flush">
                            <a href="#"
                                class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 nav-link"
                                data-target="overview">
                                <div class="d-flex align-items-center">
                                    <div class="bg-blue-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 40px; height: 40px;">
                                        <i class="fas fa-chart-line text-primary"></i>
                                    </div>
                                    <span>健康概览</span>
                                </div>
                                <i class="fas fa-angle-right text-muted"></i>
                            </a>
                            <a href="#"
                                class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 nav-link"
                                data-target="health-status">
                                <div class="d-flex align-items-center">
                                    <div class="bg-green-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 40px; height: 40px;">
                                        <i class="fas fa-heartbeat text-secondary"></i>
                                    </div>
                                    <span>健康状况</span>
                                </div>
                                <i class="fas fa-angle-right text-muted"></i>
                            </a>

                            <a href="#"
                                class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 nav-link"
                                data-target="medical-history">
                                <div class="d-flex align-items-center">
                                    <div class="bg-purple-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 40px; height: 40px;">
                                        <i class="fas fa-medkit text-purple-500"></i>
                                    </div>
                                    <span>既往病史</span>
                                </div>
                                <i class="fas fa-angle-right text-muted"></i>
                            </a>

                            <a href="#"
                                class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 nav-link"
                                data-target="reports">
                                <div class="d-flex align-items-center">
                                    <div class="bg-red-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 40px; height: 40px;">
                                        <i class="far fa-file-alt text-red-500"></i>
                                    </div>
                                    <span>检查报告</span>
                                </div>
                                <i class="fas fa-angle-right text-muted"></i>
                            </a>

                            <a href="#"
                                class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 nav-link"
                                data-target="medications">
                                <div class="d-flex align-items-center">
                                    <div class="bg-yellow-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 40px; height: 40px;">
                                        <i class="fas fa-pills text-yellow-500"></i>
                                    </div>
                                    <span>用药记录</span>
                                </div>
                                <i class="fas fa-angle-right text-muted"></i>
                            </a>

                            <a href="#"
                                class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 nav-link"
                                data-target="appointments">
                                <div class="d-flex align-items-center">
                                    <div class="bg-indigo-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 40px; height: 40px;">
                                        <i class="far fa-calendar text-indigo-500"></i>
                                    </div>
                                    <span>预约记录</span>
                                </div>
                                <i class="fas fa-angle-right text-muted"></i>
                            </a>
                        </div>

                        <button class="btn btn-primary w-100 mt-4">
                            <i class="fas fa-plus me-2"></i>添加健康记录
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card feature-card">
                    <div class="card-header bg-white border-bottom py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 fw-semibold mb-0" id="section-title">健康概览</h3>
                            <div class="d-flex align-items-center">
                                <span class="text-muted small me-2">最近更新:</span>
                                <span class="fw-medium text-primary">2025-06-15</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- 健康概览部分 -->
                        <div class="info-section active" id="overview-section">
                            <div class="row g-3 mb-4">
                                <div class="col-md-6 col-lg-3">
                                    <div class="bg-blue-50 rounded-3 p-3 border border-blue-100 health-metric">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="small fw-medium text-blue-800">血压</p>
                                                <p class="h3 fw-bold text-blue-900 mb-0">120/80 mmHg</p>
                                            </div>
                                            <div class="bg-blue-100 rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 40px; height: 40px;">
                                                <i class="fas fa-heartbeat text-blue-600"></i>
                                            </div>
                                        </div>
                                        <p class="small text-blue-600 mb-0 mt-2">上次测量: 2025-06-15</p>
                                    </div>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <div class="bg-green-50 rounded-3 p-3 border border-green-100 health-metric">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="small fw-medium text-green-800">血糖</p>
                                                <p class="h3 fw-bold text-green-900 mb-0">5.2 mmol/L</p>
                                            </div>
                                            <div class="bg-green-100 rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 40px; height: 40px;">
                                                <i class="fas fa-tint text-green-600"></i>
                                            </div>
                                        </div>
                                        <p class="small text-green-600 mb-0 mt-2">上次测量: 2024-06-10</p>
                                    </div>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <div class="bg-purple-50 rounded-3 p-3 border border-purple-100 health-metric">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="small fw-medium text-purple-800">体重</p>
                                                <p class="h3 fw-bold text-purple-900 mb-0">65 kg</p>
                                            </div>
                                            <div class="bg-purple-100 rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 40px; height: 40px;">
                                                <i class="fas fa-balance-scale text-purple-600"></i>
                                            </div>
                                        </div>
                                        <p class="small text-purple-600 mb-0 mt-2">上次测量: 2025-06-20</p>
                                    </div>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <div class="bg-red-50 rounded-3 p-3 border border-red-100 health-metric">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="small fw-medium text-red-800">心率</p>
                                                <p class="h3 fw-bold text-red-900 mb-0">72 次/分</p>
                                            </div>
                                            <div class="bg-red-100 rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 40px; height: 40px;">
                                                <i class="fas fa-heartbeat text-red-600"></i>
                                            </div>
                                        </div>
                                        <p class="small text-red-600 mb-0 mt-2">上次测量: 2025-06-18</p>
                                    </div>
                                </div>
                            </div>

                            <h4 class="h5 fw-medium mb-3">健康记录</h4>

                            <div class="record-detail">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h5 class="fw-bold text-primary">常规体检</h5>
                                    <span class="badge bg-primary">2025-06-15</span>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>医疗机构：</strong>河南省人民医院</p>
                                        <p class="mb-1"><strong>医生：</strong>王医生</p>
                                        <p class="mb-1"><strong>体检类型：</strong>年度体检</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>状态：</strong>已完成</p>
                                        <p class="mb-1"><strong>报告编号：</strong>ER-20250615-001</p>
                                    </div>
                                </div>
                                <div class="border-top pt-3">
                                    <h6 class="fw-bold">检查结果摘要：</h6>
                                    <ul>
                                        <li>血压：120/80 mmHg（正常）</li>
                                        <li>血糖：5.2 mmol/L（正常）</li>
                                        <li>胆固醇：4.8 mmol/L（正常）</li>
                                        <li>心电图：窦性心律，正常心电图</li>
                                    </ul>
                                </div>
                                <div class="text-end mt-3">
                                    <button class="btn btn-outline-primary btn-sm me-2">下载报告</button>
                                    <button class="btn btn-primary btn-sm">查看详情</button>
                                </div>
                            </div>

                            <div class="record-detail">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h5 class="fw-bold text-primary">牙科检查</h5>
                                    <span class="badge bg-primary">2025-05-20</span>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>医疗机构：</strong>郑州大学第一附属医院</p>
                                        <p class="mb-1"><strong>医生：</strong>李医生</p>
                                        <p class="mb-1"><strong>检查类型：</strong>定期检查</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>状态：</strong>已完成</p>
                                        <p class="mb-1"><strong>报告编号：</strong>DC-20250520-002</p>
                                    </div>
                                </div>
                                <div class="border-top pt-3">
                                    <h6 class="fw-bold">检查结果摘要：</h6>
                                    <ul>
                                        <li>口腔卫生状况良好</li>
                                        <li>发现轻微牙结石，建议洗牙</li>
                                        <li>左上第二磨牙有轻微龋齿，建议补牙</li>
                                        <li>牙龈状况健康，无出血</li>
                                    </ul>
                                </div>
                                <div class="text-end mt-3">
                                    <button class="btn btn-outline-primary btn-sm me-2">下载报告</button>
                                    <button class="btn btn-primary btn-sm">查看详情</button>
                                </div>
                            </div>

                            <div class="record-detail">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h5 class="fw-bold text-primary">心脏检查</h5>
                                    <span class="badge bg-primary">2024-04-10</span>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>医疗机构：</strong>河南省人民医院</p>
                                        <p class="mb-1"><strong>医生：</strong>张医生</p>
                                        <p class="mb-1"><strong>检查类型：</strong>心血管专项</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>状态：</strong>已完成</p>
                                        <p class="mb-1"><strong>报告编号：</strong>CV-20240410-003</p>
                                    </div>
                                </div>
                                <div class="border-top pt-3">
                                    <h6 class="fw-bold">检查结果摘要：</h6>
                                    <ul>
                                        <li>心脏超声：结构正常，射血分数65%</li>
                                        <li>24小时动态心电图：偶发房性早搏</li>
                                        <li>运动负荷试验：阴性，无心肌缺血表现</li>
                                        <li>血脂检查：总胆固醇5.1 mmol/L（轻度升高）</li>
                                    </ul>
                                </div>
                                <div class="text-end mt-3">
                                    <button class="btn btn-outline-primary btn-sm me-2">下载报告</button>
                                    <button class="btn btn-primary btn-sm">查看详情</button>
                                </div>
                            </div>

                            <div class="text-center mt-4">
                                <button class="btn btn-outline-primary">
                                    <i class="fas fa-history me-2"></i>查看更多历史记录
                                </button>
                            </div>
                        </div>

                        <div class="info-section" id="health-status-section">
                            <h4 class="h5 fw-medium mb-4">健康状况</h4>
                            <div class="row mb-4">
                                <div class="col-md-6 mb-4">
                                    <h5 class="fw-medium mb-3">过敏史</h5>
                                    <div class="card border-danger mb-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h6 class="fw-bold text-danger">青霉素过敏</h6>
                                                    <p class="mb-1">首次发现时间：1995年</p>
                                                    <p class="mb-0">症状：皮疹、呼吸困难</p>
                                                </div>
                                                <span class="badge bg-danger">严重</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card border-warning">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h6 class="fw-bold text-warning">海鲜过敏</h6>
                                                    <p class="mb-1">首次发现时间：2008年</p>
                                                    <p class="mb-0">症状：皮肤瘙痒、轻微肿胀</p>
                                                </div>
                                                <span class="badge bg-warning">中度</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <h5 class="fw-medium mb-3">生活习惯</h5>
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="text-center">
                                                        <div class="display-5 fw-bold text-primary">无</div>
                                                        <p class="text-muted mb-0">吸烟史</p>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="text-center">
                                                        <div class="display-5 fw-bold text-primary">偶尔</div>
                                                        <p class="text-muted mb-0">饮酒史</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <i class="fas fa-running text-success me-2 fs-4"></i>
                                                <h6 class="fw-bold mb-0">运动习惯</h6>
                                            </div>
                                            <p class="mb-0">每周跑步3次，每次5公里；周末游泳或骑行</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <h5 class="fw-medium mb-3">慢性疾病</h5>
                            <div class="alert alert-success mb-4">
                                <div class="d-flex">
                                    <i class="fas fa-check-circle me-3 fs-4"></i>
                                    <div>目前没有慢性疾病记录</div>
                                </div>
                            </div>

                            <h5 class="fw-medium mb-3">家族病史</h5>
                            <div class="card">
                                <div class="card-body">
                                    <ul class="mb-0">
                                        <li>父亲：高血压（65岁确诊）</li>
                                        <li>母亲：无重大疾病史</li>
                                        <li>祖父：糖尿病（70岁确诊）</li>
                                        <li>祖母：冠心病（72岁确诊）</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- 既往病史部分 -->
                        <div class="info-section" id="medical-history-section">
                            <h4 class="h5 fw-medium mb-4">既往病史</h4>
                            <div class="accordion" id="medicalHistoryAccordion">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#historyOne">
                                            2023年 - 急性阑尾炎
                                        </button>
                                    </h2>
                                    <div id="historyOne" class="accordion-collapse collapse show"
                                        data-bs-parent="#medicalHistoryAccordion">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>诊断日期：</strong>2023-08-12</p>
                                                    <p><strong>医疗机构：</strong>郑州大学第一附属医院</p>
                                                    <p><strong>主治医生：</strong>刘医生</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <p><strong>治疗方式：</strong>腹腔镜阑尾切除术</p>
                                                    <p><strong>治疗结果：</strong>痊愈</p>
                                                    <p><strong>康复时间：</strong>2周</p>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <h6><strong>症状描述：</strong></h6>
                                                <p>右下腹剧烈疼痛，伴有恶心、呕吐，体温38.2℃</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#historyTwo">
                                            2021年 - 肺炎
                                        </button>
                                    </h2>
                                    <div id="historyTwo" class="accordion-collapse collapse"
                                        data-bs-parent="#medicalHistoryAccordion">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>诊断日期：</strong>2021-02-25</p>
                                                    <p><strong>医疗机构：</strong>河南省人民医院</p>
                                                    <p><strong>主治医生：</strong>王医生</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <p><strong>治疗方式：</strong>抗生素治疗（阿奇霉素）</p>
                                                    <p><strong>治疗结果：</strong>痊愈</p>
                                                    <p><strong>康复时间：</strong>3周</p>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <h6><strong>症状描述：</strong></h6>
                                                <p>高烧39℃，咳嗽伴黄色痰液，胸痛，呼吸急促</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#historyThree">
                                            2019年 - 骨折
                                        </button>
                                    </h2>
                                    <div id="historyThree" class="accordion-collapse collapse"
                                        data-bs-parent="#medicalHistoryAccordion">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>诊断日期：</strong>2019-07-18</p>
                                                    <p><strong>医疗机构：</strong>郑州市骨科医院</p>
                                                    <p><strong>主治医生：</strong>张医生</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <p><strong>治疗方式：</strong>石膏固定</p>
                                                    <p><strong>治疗结果：</strong>痊愈</p>
                                                    <p><strong>康复时间：</strong>8周</p>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <h6><strong>症状描述：</strong></h6>
                                                <p>滑雪时摔倒，右手桡骨远端骨折，局部肿胀疼痛</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-4">
                                <button class="btn btn-primary">
                                    <i class="fas fa-plus me-2"></i>添加病史记录
                                </button>
                            </div>
                        </div>

                        <!-- 检查报告部分 -->
                        <div class="info-section" id="reports-section">
                            <h4 class="h5 fw-medium mb-4">检查报告</h4>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="card h-100">
                                        <div class="card-header bg-primary text-white">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h5 class="mb-0">血液检查</h5>
                                                <span>2025-06-15</span>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <h6 class="fw-bold">主要指标：</h6>
                                                <ul class="mb-0">
                                                    <li>白细胞计数：6.2 × 10⁹/L（正常）</li>
                                                    <li>血红蛋白：145 g/L（正常）</li>
                                                    <li>血小板：210 × 10⁹/L（正常）</li>
                                                    <li>C反应蛋白：< 5 mg/L（正常） </li>
                                                </ul>
                                            </div>
                                            <div class="mt-auto">
                                                <div class="d-flex justify-content-between">
                                                    <span class="badge bg-success">正常</span>
                                                    <div>
                                                        <button class="btn btn-sm btn-outline-primary me-1">查看</button>
                                                        <button class="btn btn-sm btn-primary">下载</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <div class="card h-100">
                                        <div class="card-header bg-primary text-white">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h5 class="mb-0">超声检查</h5>
                                                <span>2025-05-10</span>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <h6 class="fw-bold">检查项目：</h6>
                                                <ul class="mb-0">
                                                    <li>腹部超声（肝、胆、胰、脾、肾）</li>
                                                    <li>甲状腺超声</li>
                                                    <li>颈动脉超声</li>
                                                </ul>
                                            </div>
                                            <div class="mt-3">
                                                <h6 class="fw-bold">检查结果：</h6>
                                                <p>肝内胆管结石（3mm），其他未见明显异常</p>
                                            </div>
                                            <div class="mt-auto">
                                                <div class="d-flex justify-content-between">
                                                    <span class="badge bg-warning">轻微异常</span>
                                                    <div>
                                                        <button class="btn btn-sm btn-outline-primary me-1">查看</button>
                                                        <button class="btn btn-sm btn-primary">下载</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-header bg-primary text-white">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h5 class="mb-0">心电图</h5>
                                                <span>2024-04-05</span>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <h6 class="fw-bold">检查结果：</h6>
                                                <p>窦性心律，心率72次/分，正常心电图</p>
                                            </div>
                                            <div class="mt-auto">
                                                <div class="d-flex justify-content-between">
                                                    <span class="badge bg-success">正常</span>
                                                    <div>
                                                        <button class="btn btn-sm btn-outline-primary me-1">查看</button>
                                                        <button class="btn btn-sm btn-primary">下载</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-header bg-primary text-white">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h5 class="mb-0">胸部X光</h5>
                                                <span>2024-03-18</span>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <h6 class="fw-bold">检查结果：</h6>
                                                <p>双肺纹理清晰，心影大小形态正常，膈面光滑</p>
                                            </div>
                                            <div class="mt-auto">
                                                <div class="d-flex justify-content-between">
                                                    <span class="badge bg-success">正常</span>
                                                    <div>
                                                        <button class="btn btn-sm btn-outline-primary me-1">查看</button>
                                                        <button class="btn btn-sm btn-primary">下载</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-center mt-4">
                                <button class="btn btn-outline-primary">
                                    <i class="fas fa-history me-2"></i>查看历史报告
                                </button>
                            </div>
                        </div>

                        <!-- 用药记录部分 -->
                        <div class="info-section" id="medications-section">
                            <h4 class="h5 fw-medium mb-4">用药记录</h4>
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>药品名称</th>
                                            <th>用途</th>
                                            <th>剂量</th>
                                            <th>频率</th>
                                            <th>开始日期</th>
                                            <th>结束日期</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="bg-indigo-100 rounded-circle d-flex align-items-center justify-content-center me-2"
                                                        style="width: 36px; height: 36px;">
                                                        <i class="fas fa-pills text-indigo-600"></i>
                                                    </div>
                                                    <span>阿托伐他汀钙片</span>
                                                </div>
                                            </td>
                                            <td>降血脂</td>
                                            <td>10mg</td>
                                            <td>每日1次</td>
                                            <td>2025-04-10</td>
                                            <td>长期</td>
                                            <td><span class="badge bg-success">使用中</span></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="bg-blue-100 rounded-circle d-flex align-items-center justify-content-center me-2"
                                                        style="width: 36px; height: 36px;">
                                                        <i class="fas fa-pills text-blue-600"></i>
                                                    </div>
                                                    <span>奥美拉唑肠溶胶囊</span>
                                                </div>
                                            </td>
                                            <td>胃酸过多</td>
                                            <td>20mg</td>
                                            <td>每日1次</td>
                                            <td>2025-06-05</td>
                                            <td>2025-06-20</td>
                                            <td><span class="badge bg-primary">已完成</span></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="bg-green-100 rounded-circle d-flex align-items-center justify-content-center me-2"
                                                        style="width: 36px; height: 36px;">
                                                        <i class="fas fa-pills text-green-600"></i>
                                                    </div>
                                                    <span>维生素D3软胶囊</span>
                                                </div>
                                            </td>
                                            <td>补充维生素D</td>
                                            <td>1000IU</td>
                                            <td>每日1次</td>
                                            <td>2024-01-15</td>
                                            <td>长期</td>
                                            <td><span class="badge bg-success">使用中</span></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="bg-yellow-100 rounded-circle d-flex align-items-center justify-content-center me-2"
                                                        style="width: 36px; height: 36px;">
                                                        <i class="fas fa-pills text-yellow-600"></i>
                                                    </div>
                                                    <span>阿莫西林胶囊</span>
                                                </div>
                                            </td>
                                            <td>呼吸道感染</td>
                                            <td>500mg</td>
                                            <td>每日3次</td>
                                            <td>2024-02-10</td>
                                            <td>2024-02-20</td>
                                            <td><span class="badge bg-secondary">已停用</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="d-flex justify-content-end mt-4">
                                <button class="btn btn-primary me-2">
                                    <i class="fas fa-plus me-2"></i>添加用药记录
                                </button>
                                <button class="btn btn-outline-primary">
                                    <i class="fas fa-bell me-2"></i>设置用药提醒
                                </button>
                            </div>
                        </div>

                        <!-- 预约记录部分 -->
                        <div class="info-section" id="appointments-section">
                            <h4 class="h5 fw-medium mb-4">预约记录</h4>
                            <ul class="nav nav-pills mb-4" id="appointmentTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="upcoming-tab" data-bs-toggle="pill"
                                        data-bs-target="#upcoming" type="button">即将到来</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="completed-tab" data-bs-toggle="pill"
                                        data-bs-target="#completed" type="button">已完成</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="cancelled-tab" data-bs-toggle="pill"
                                        data-bs-target="#cancelled" type="button">已取消</button>
                                </li>
                            </ul>

                            <div class="tab-content" id="appointmentTabContent">
                                <div class="tab-pane fade show active" id="upcoming">
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h5 class="fw-bold text-primary mb-1">心血管内科 - 定期复查</h5>
                                                    <div class="d-flex align-items-center">
                                                        <i class="far fa-calendar me-2 text-muted"></i>
                                                        <span class="me-3">2025-07-10 星期三</span>
                                                        <i class="far fa-clock me-2 text-muted"></i>
                                                        <span>14:30 - 15:00</span>
                                                    </div>
                                                    <div class="mt-2">
                                                        <i class="fas fa-user-md me-2 text-muted"></i>
                                                        <span>张医生 - 河南省人民医院</span>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <span class="badge bg-warning me-2">待就诊</span>
                                                    <div class="mt-2">
                                                        <button
                                                            class="btn btn-sm btn-outline-primary me-1">查看详情</button>
                                                        <button class="btn btn-sm btn-danger">取消预约</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h5 class="fw-bold text-primary mb-1">牙科 - 洗牙</h5>
                                                    <div class="d-flex align-items-center">
                                                        <i class="far fa-calendar me-2 text-muted"></i>
                                                        <span class="me-3">2025-07-18 星期四</span>
                                                        <i class="far fa-clock me-2 text-muted"></i>
                                                        <span>10:00 - 10:30</span>
                                                    </div>
                                                    <div class="mt-2">
                                                        <i class="fas fa-user-md me-2 text-muted"></i>
                                                        <span>李医生 - 郑州大学第一附属医院</span>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <span class="badge bg-warning me-2">待就诊</span>
                                                    <div class="mt-2">
                                                        <button
                                                            class="btn btn-sm btn-outline-primary me-1">查看详情</button>
                                                        <button class="btn btn-sm btn-danger">取消预约</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="completed">
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h5 class="fw-bold text-primary mb-1">年度体检</h5>
                                                    <div class="d-flex align-items-center">
                                                        <i class="far fa-calendar me-2 text-muted"></i>
                                                        <span class="me-3">2024-06-15 星期六</span>
                                                        <i class="far fa-clock me-2 text-muted"></i>
                                                        <span>08:30 - 10:00</span>
                                                    </div>
                                                    <div class="mt-2">
                                                        <i class="fas fa-user-md me-2 text-muted"></i>
                                                        <span>王医生 - 河南省人民医院</span>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <span class="badge bg-success me-2">已完成</span>
                                                    <div class="mt-2">
                                                        <button class="btn btn-sm btn-outline-primary">查看报告</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h5 class="fw-bold text-primary mb-1">消化内科 - 胃部不适</h5>
                                                    <div class="d-flex align-items-center">
                                                        <i class="far fa-calendar me-2 text-muted"></i>
                                                        <span class="me-3">2025-05-22 星期三</span>
                                                        <i class="far fa-clock me-2 text-muted"></i>
                                                        <span>15:30 - 16:00</span>
                                                    </div>
                                                    <div class="mt-2">
                                                        <i class="fas fa-user-md me-2 text-muted"></i>
                                                        <span>陈医生 - 河南省人民医院</span>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <span class="badge bg-success me-2">已完成</span>
                                                    <div class="mt-2">
                                                        <button class="btn btn-sm btn-outline-primary">查看报告</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="cancelled">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h5 class="fw-bold text-primary mb-1">眼科 - 视力检查</h5>
                                                    <div class="d-flex align-items-center">
                                                        <i class="far fa-calendar me-2 text-muted"></i>
                                                        <span class="me-3">2025-04-05 星期五</span>
                                                        <i class="far fa-clock me-2 text-muted"></i>
                                                        <span>11:00 - 11:30</span>
                                                    </div>
                                                    <div class="mt-2">
                                                        <i class="fas fa-user-md me-2 text-muted"></i>
                                                        <span>赵医生 - 郑州市眼科医院</span>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <span class="badge bg-secondary me-2">已取消</span>
                                                    <div class="mt-2">
                                                        <button class="btn btn-sm btn-outline-primary">重新预约</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-center mt-4">
                                <button class="btn btn-primary">
                                    <i class="far fa-calendar-plus me-2"></i>预约新就诊
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row g-5 mb-5">
                <div class="col-lg-4">
                    <div class="d-flex align-items-center mb-4">
                        <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                            style="width: 40px; height: 40px;">
                            <i class="fas fa-heartbeat text-white"></i>
                        </div>
                        <span class="fs-4 fw-bold text-white">智联医防</span>
                    </div>
                    <p class="text-white-50 mb-4">
                        我们致力于提供便捷、专业的医疗健康服务，让每个人都能享受到高质量的医疗资源。
                    </p>
                    <div class="d-flex">
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-qq"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle" style="width: 40px; height: 40px;">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-2">
                    <h5 class="text-white mb-4">快速链接</h5>
                    <ul class="list-unstyled footer-links">
                        <li class="mb-2"><a href="index.html">首页</a></li>
                        <li class="mb-2"><a href="ai-consultation.html">AI问诊</a></li>
                        <li class="mb-2"><a href="medical-science.html">医学科普</a></li>
                        <li class="mb-2"><a href="mental-health.html">心理健康</a></li>
                        <li class="mb-2"><a href="e-record.html">电子档案</a></li>
                    </ul>
                </div>

                <div class="col-lg-3">
                    <h5 class="text-white mb-4"><a href="https://zwfw.nhc.gov.cn/cxx/"
                            class="text-white"></a>基层医疗信息查询</a></h5>
                    <ul class="list-unstyled footer-links">
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary mt-1 me-3"></i>
                            <span><a href="https://www.nhc.gov.cn/wjw/wsbzxx/wsbz.shtml"
                                    class="text-white">卫生标准查询</a></span>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://sppt.cfsa.net.cn:8086/db" class="text-white">食品安全国家标准查询</a></span>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://www.nhc.gov.cn/wjw/jbywml/list.shtml"
                                    class="text-white">基本药物目录查询</a></span>
                        </li>
                        <!-- <li class="d-flex mb-3">
                        <i class="fas fa-map-marker-alt text-primary me-3"></i>
                        <span><a href="https://zwfw.nhc.gov.cn/cxx/ywcx/ygptcx/"
                                class="text-white">药物平台管理查询</a></span>
                    </li> -->
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/qtcx/gjwsczcx/"
                                    class="text-white">国家卫生城镇查询</a></span>
                        </li>
                        <li class="d-flex">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/ywjgcx/qgyzjg/"
                                    class="text-white">医卫机构查询</a></span>
                        </li>

                    </ul>
                </div>

                <div class="col-lg-3">
                    <h5 class="text-white mb-4">医疗信息查询</h5>
                    <p class="text-white-50 mb-4">
                        查询权威医疗数据，获取最新公共卫生服务信息
                    </p>
                    <form>
                        <div class="mb-3">
                            <input type="email" class="form-control bg-dark border-dark text-white"
                                placeholder="您的邮箱地址">
                        </div>
                        <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill shadow-lg">
                            <i class="fas fa-search me-2"></i>立即查询
                        </button>
                    </form>
                </div>
            </div>

            <div class="border-top border-gray-800 pt-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <p class="text-white-50 mb-3 mb-md-0">
                        &copy; 2025 智联医防服务平台. 保留所有权利.
                    </p>
                    <div class="d-flex">
                        <a href="#" class="text-white-50 me-3">隐私政策</a>
                        <a href="#" class="text-white-50 me-3">服务条款</a>
                        <a href="#" class="text-white-50 me-3">免责声明</a>
                        <a href="#" class="text-white-50">帮助中心</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function () {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('shadow');
            } else {
                navbar.classList.remove('shadow');
            }
        });

        // 左侧导航栏点击事件
        document.querySelectorAll('.list-group-item').forEach(item => {
            item.addEventListener('click', function (e) {
                e.preventDefault();

                // 移除所有活动状态
                document.querySelectorAll('.list-group-item').forEach(link => {
                    link.classList.remove('active');
                });

                // 添加当前活动状态
                this.classList.add('active');

                // 获取目标区域
                const target = this.getAttribute('data-target');

                // 更新标题
                let title = '';
                switch (target) {
                    case 'overview':
                        title = '健康概览';
                        break;
                    case 'health-status':
                        title = '健康状况';
                        break;
                    case 'medical-history':
                        title = '既往病史';
                        break;
                    case 'reports':
                        title = '检查报告';
                        break;
                    case 'medications':
                        title = '用药记录';
                        break;
                    case 'appointments':
                        title = '预约记录';
                        break;
                }
                document.getElementById('section-title').textContent = title;

                // 隐藏所有信息区域
                document.querySelectorAll('.info-section').forEach(section => {
                    section.classList.remove('active');
                });

                // 显示目标区域
                document.getElementById(`${target}-section`).classList.add('active');
            });
        });
    </script>
</body>

</html>